<template>
  <el-dialog title="系统自定义选择" :visible.sync="isOpen" :append-to-body="true" @close="handleClose">
    <div class="search-list">
      <el-form ref="form" class="search-table-form" :model="formParams" label-width="90px" size="small"
               style="background: #fff;padding: 10px">
        <div style="display: flex;align-items: center">
          <el-form-item label="标题名：" style="margin-bottom: 0;margin-right: 20px">
            <el-input v-model="formParams.seriesName" placeholder="请输入" style="width: 100%"></el-input>
          </el-form-item>
          <div style="display: flex;align-items: center">
            <el-button size="small" type="primary" @click="handleSearch(formParams.seriesName)">搜索查询</el-button>
            <el-button size="small" type="default" @click="handleRest">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <el-table :data="tableData" ref="listTable" style="width: 100%" stripe v-loading="loadingTable"
              element-loading-text="加载中"
              highlight-current-row @row-click="handleCurrentRow">
      <el-table-column label="选择" width="50px">
        <template slot-scope="scope">
          <el-radio class="no-label" v-model="indexRow" :label="scope.row.id" :key="'radio' + scope.$index"
                    @change="currentRow(scope.$index, scope.row)"></el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题"/>
      <el-table-column prop="spuCount" label="上次修改时间">
        <template slot-scope="{row}">
          {{row.createDate | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        class="pagination"
        :page-size="formParams.pageSize"
        background
        @current-change="handleCurrentChange"
        :current-page="formParams.page"
        layout="total, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <span slot="footer" class="dialog-footer">
<!--    <el-button @click="handleClose">取 消</el-button>-->
    <el-button type="primary" @click="saveProductList">添加</el-button>
  </span>
  </el-dialog>
</template>

<script>
import {mapGetters} from 'vuex';
import {getCusPage} from '@/api/custom';
import {getSiteId} from '@/utils/auth';

export default {
    name: 'customize_dialog',
    props: {
        productDialogVisible: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        productDialogVisible (newVal) {
            this.isOpen = newVal;
        }
    },
    data () {
        return {
            isOpen: this.productDialogVisible,
            loadingTable: false,
            indexRow: null,
            currentIndex: 0,
            total: 0,
            formParams: {
                seriesName: '',
                page: 1,
                pageSize: 20
            },
            tableData: [],
            tableDataBase: []
        };
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        },
        ...mapGetters(['timeZone'])
    },
    created () {
        this.initData();
    },
    methods: {
        initData () {
            let parameters = {
                siteId: this.siteId
            };
            this.loadingTable = true;
            getCusPage({...parameters, ...this.formParams}).then((res) => {
                this.tableData = res.records;
                this.tableDataBase = res.records;
                this.total = res.totalElements;
                this.loadingTable = false;
            });
        },
        handleTableList () {
            this.productDialogVisible = true;
            let row = this.tableData.find(res => res.id === this.formData.productId);
            this.$nextTick(() => {
                this.$refs.listTable.setCurrentRow(row);
                this.indexRow = row.id;
            });
        },
        currentRow (index, row) {
            this.indexRow = row.id;
        },
        handleCurrentRow (row, column, event) {
            this.indexRow = row.id;
        },
        getParams (id) {
            return this.tableData.find(res => res.id === id);
        },
        saveProductList () {
            if (!this.indexRow) {
                return this.$message.error('请选择');
            }
            console.log(this.getParams(this.indexRow));
            this.$emit('save', this.getParams(this.indexRow));
            this.isOpen = false;
        },
        handleCurrentChange (val) {
            this.formParams.page = val;
            this.initData();
        },
        handleSearch (name) {
            this.tableData = JSON.parse(JSON.stringify(this.tableDataBase)).filter(res => { return res.title.indexOf(name) !== -1; });
        },
        handleRest () {
            this.formParams = {
                name: '',
                page: 1,
                pageSize: 20,
                status: 'unfinished'
            };
            this.initData();
        },
        handleClose () {
            this.isOpen = false;
            this.$emit('close');
        }
    }
};
</script>

<style scoped lang="scss">
.pagination{
  margin-top: 12px;
  text-align: right;
}
</style>
